<template>
  <div>
    <van-nav-bar>
        <template #left>
            <van-icon name="arrow-left" @click="goIndex" />
          </template>
      <template #title>
        <van-search v-model="value" placeholder="请输入搜索关键词" input-align="center" @click="goSearch">
          
        </van-search>
      </template>
    </van-nav-bar>

    <!--  -->
    <van-empty description="没有数据了呢" v-if="setShow" />

    <!-- 有数据的时候渲染 -->
    <van-tree-select
      :items="items"
      height="auto"
      :main-active-index.sync="items.opt_id"
      :active-id.sync="items.opt_id"
      v-else
      :click-nav="changList(items.opt_id)"
    >
      <template #content v-if="paths==undefined">
        <listDetail :path="paths"></listDetail>
      </template>
      <template #content v-else>
        <listDetail :path="paths.path_name" :key="paths.opt_id"></listDetail>
      </template>
    </van-tree-select>
  </div>
</template>

<script>
import http from "@/util/http";
import listDetail from "./listDetail";
import Vue from "vue";
import { TreeSelect, Image, Search, Empty, NavBar } from "vant";

Vue.use(TreeSelect);
Vue.use(Image);
Vue.use(Search);
Vue.use(Empty);
Vue.use(NavBar);

export default {
  data() {
    return {
      value: "",
      active: 0,
      items: [],
      paths: "baihuo",
      ishow: false,
    };
  },
  components: {
    listDetail,
  },
  mounted() {
    this.getDataList;
    this.changList(0);
  },
  methods: {
    //  获取请求路径
    changList(index) {
      this.paths = this.items[index];
    },
    goIndex() {
      this.$router.push("index");
    },
    goSearch(){
        this.$router.push('search')
    }
  },
  computed: {
    //   获取数据 配合右边的列表
    getDataList() {
      http.get("datalist").then((res) => {
        this.items.push(...res.data.datalist);
      });
    },
    // 判断是否已经请求好了数据。
    setShow() {
      this.ishow = this.items.length;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>